<template>
    <div>
        <van-nav-bar
                title="酒店"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <van-search
                v-model="seamsg"
                show-action
                label="酒店"
                placeholder="请输入搜索关键词"
                @search="onSearch"
        >
            <template #action>
                <div @click="onClickButton(seamsg)">搜索</div>
            </template>
        </van-search>
    </div>
    <div>
        <van-row gutter="10">
            <van-col span="24" v-for="h in msg">
                <van-card class="card1"
                          :tag="h.tag"
                          :desc="h.name"
                          :price="h.price"
                          :title="h.title"
                          :thumb="h.img"
                >
                    <template #footer>
                        <van-button size="mini" @click="onCheck(h.id)">查看</van-button>
                    </template>
                </van-card>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {
        name: "HotelSearchView",
        setup(){
            const onClickLeft = () => history.back();
            return {
                onClickLeft,
            };
        },
        data() {
            return {
                seamsg:"",
                msg:null,
            }
        },
        created() {
            var that=this;
            this.axios.get("http://localhost:8081/api/hotel/search.do?title="+this.$route.query.title).then(res => {
                if (res.data.code == 200) {
                    that.msg=res.data.data;
                } else {
                    Toast(res.data.msg);
                }
            })
        },
        methods:{
            onClickButton(title){
                //本页面的搜索请求接口
                var that=this;
                this.axios.get("http://localhost:8081/api/hotel/search.do?title="+title).then(res => {
                    if (res.data.code == 200) {
                        that.msg=res.data.data;
                    } else {
                        Toast(res.data.msg);
                    }
                })
            },
            onCheck(id){
                this.$router.push({ path: 'hoteldetail', query: { id: id } })
            }
        }
    }
</script>

<style scoped>
    .card1{
        height: 150px;
    }
</style>